<template>
    <div class="detail" v-loading="loading">
        <merchantNum />
        <searchForm class="search-form" :searchFormConfig="searchFormConfig" @search="onClickSearch"
            @clear="onClickClear" ref="searchFormRef"/>
        <plainTable :tableData="tableData" :tableConfigData="tableConfigData" :pageInfo="pageInfo"
            @prevPage="handlePrevPage" @nextPage="handleNextPage" />
    </div>
</template>
<script setup>
import merchantNum from '@/components/merchantNum.vue'
import searchForm from '@/components/searchForm.vue'
import plainTable from '@/components/plainTable.vue'
import { useDetail } from '@/hooks/account';
import { getDateAnd7DaysAgo,dateTransform } from "@/utils/index";
import { OPERATE_TYPES } from '@/utils/selectOptions';
import { useSelectOptionsStore } from "@/store/index";
import { ref } from 'vue';

const { initData, loading, tableData, tableConfigData, searchFormConfig, pageInfo } = useDetail();

const { today, sevenDaysAgo } = getDateAnd7DaysAgo();

const selectOptionsStore = useSelectOptionsStore();
const searchFormRef = ref(null);
initData({
    currency: selectOptionsStore.currencyList[0].value,
    type: OPERATE_TYPES[2].value,
    startdata: sevenDaysAgo.dateStr,
    enddata: today.dateStr,
    platform_order: '',
    merchant_order: '',
    status: '',
    page: "1",
});


const onClickSearch = (form) => {
    clog('onClickSearch：', form);
    initData({
        currency: form.currency,
        type: form.operateType,
        startdata: form?.dateRange[0],
        enddata: form?.dateRange[1],
        platform_order: form.platformOrderId,
        merchant_order: form.merchantOrderId,
        status: form.orderStatus,
        page: "1",
    });
}

const onClickClear = () => {
    initData({
        currency: selectOptionsStore.currencyList[0].value,
        type: OPERATE_TYPES[2].value,
        startdata: sevenDaysAgo.dateStr,
        enddata: today.dateStr,
        platform_order: '',
        merchant_order: '',
        status: '',
        page: "1",
    });
}

const handlePrevPage = () => {
    if (pageInfo.value.currentPage <= 1) {
        pageInfo.value.currentPage = 1;
        return;
    }
    pageInfo.value.currentPage--;
    initData({
        currency: selectOptionsStore.currencyList[0].value,
        type: OPERATE_TYPES[2].value,
        startdata: dateTransform(searchFormRef.value.searchForm.dateRange[0]),
        enddata: dateTransform(searchFormRef.value.searchForm.dateRange[1]),
        platform_order: '',
        merchant_order: '',
        status: '',
        page: pageInfo.value.currentPage,
    });
}
const handleNextPage = () => {
    if (pageInfo.value.currentPage >= pageInfo.value.totalPage) {
        pageInfo.value.currentPage = pageInfo.value.totalPage;
        return;
    }
    pageInfo.value.currentPage++;
    initData({
        currency: selectOptionsStore.currencyList[0].value,
        type: OPERATE_TYPES[2].value,
        startdata: dateTransform(searchFormRef.value.searchForm.dateRange[0]),
        enddata: dateTransform(searchFormRef.value.searchForm.dateRange[1]),
        platform_order: '',
        merchant_order: '',
        status: '',
        page: pageInfo.value.currentPage,
    });
}
</script>
<style scoped lang="scss">
.detail {
    .search-form {
        margin-top: 32px;
        margin-bottom: 32px;
    }
}
</style>